<template>
  <el-tabs v-model="activeName" @tab-click="handleClick" class="px-50px">
    <el-tab-pane label="配偶信息" name="spouse">
      <TableInfo
        :labelList="spouseList"
        ref="spouseInfo"
        :data-list="familyInfo.spouseList"
        :pageType="pageType"
      >
        <template v-slot:handle="rowData">
          <div>
            <el-button type="primary" plain text @click="rowData.deleteRow"
              >删除</el-button
            >
          </div>
        </template>
      </TableInfo>
    </el-tab-pane>
    <el-tab-pane label="子女信息" name="children">
      <TableInfo
        :labelList="childrenList"
        ref="childrenInfo"
        :data-list="familyInfo.childrenList"
        :pageType="pageType"
      >
        <template v-slot:handle="rowData">
          <div>
            <el-button type="primary" plain text @click="rowData.deleteRow"
              >删除</el-button
            >
          </div>
        </template></TableInfo
      >
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import TableInfo from './tableInfo'

const { proxy } = getCurrentInstance()

const props = defineProps({
  familyInfo: {
    type: Object,
    default: () => {}
  },
  pageType: {
    type: String,
    default: 'add'
  }
})
const activeName = ref('spouse')
function handleClick(tab) {
  activeName.value = tab.props.name
}

/**
 * @params
 * prop: 字段名
 * label: 表头名
 * align: 文字对齐方式
 * width: 列宽
 * minWidth: 列最小宽度
 * fixed: 是否固定
 * slot: 是否使用插槽 / 插槽名称
 * required: 是否必填
 * type: 输入框类型 默认输入框   input / select
 * options: select 下拉数据
 */

const spouseList = ref([
  { prop: 'relationship', label: '关系', align: 'center', width: '120' },
  {
    prop: 'name',
    label: '姓名',
    align: 'center',
    width: '120',
    required: true
  },
  {
    prop: 'birthday',
    label: '出生年月',
    placeholder: 'YYYY-MM-DD',
    align: 'center',
    width: '200',
    validator: value => {
      const reg =
        /^(19|20|21)\d{2}-((0[1-9])|(1[012]))-(((0|1|2)[1-9])|(3(0|1)))$/
      if (!reg.test(value)) {
        proxy.$modal.msgWarning('配偶信息存在问题，请输入正确的日期 YYYY-MM-DD')
        return false
      }
      return true
    }
  },
  {
    prop: 'political',
    label: '政治面貌',
    align: 'center',
    width: '150',
    type: 'select',
    options: [
      { label: '中共党员', value: '1' },
      { label: '团员', value: '2' },
      { label: '群众', value: '3' },
      { label: '民主党派', value: '4' }
    ]
  },
  {
    prop: 'mobile',
    label: '联系电话',
    align: 'center',
    width: '200',
    validator: value => {
      const reg = /^((\+?86)|(\(\+86\)))?((1[0-9])\d{9})$/
      if (!reg.test(value)) {
        proxy.$modal.msgWarning('配偶信息存在问题，请输入正确的手机号码')
        return false
      }
      return true
    }
  },
  {
    prop: 'companyName',
    label: '（原）工作单位',
    align: 'center',
    minWidth: '300'
  },
  { prop: 'currentStatus', label: '目前情况', align: 'center', width: '200' },
  {
    prop: 'handle',
    label: '操作',
    align: 'center',
    width: '100',
    solt: 'handle',
    fixed: 'right'
  }
])
const childrenList = ref([
  { prop: 'relationship', label: '关系', align: 'center', width: '120' },
  {
    prop: 'name',
    label: '姓名',
    align: 'center',
    width: '120',
    required: true
  },
  {
    prop: 'birthday',
    label: '出生年月',
    placeholder: 'YYYY-MM-DD',
    align: 'center',
    width: '200',
    validator: function (value) {
      console.log(value, 'vlaue')
      const reg =
        /^(19|20|21)\d{2}-((0[1-9])|(1[012]))-(((0|1|2)[1-9])|(3(0|1)))$/

      if (!reg.test(value)) {
        proxy.$modal.msgWarning('子女信息存在问题，请输入正确的日期 YYYY-MM-DD')
        return false
      }
      return true
    }
  },
  {
    prop: 'political',
    label: '政治面貌',
    align: 'center',
    width: '150',
    type: 'select',
    options: [
      { label: '中共党员', value: '1' },
      { label: '团员', value: '2' },
      { label: '群众', value: '3' },
      { label: '民主党派', value: '4' }
    ]
  },
  {
    prop: 'mobile',
    label: '联系电话',
    align: 'center',
    width: '200',
    validator: value => {
      const reg = /^((\+?86)|(\(\+86\)))?((1[0-9])\d{9})$/
      if (!reg.test(value)) {
        proxy.$modal.msgWarning('子女信息存在问题，请输入正确的手机号码')
        return false
      }
      return true
    }
  },
  {
    prop: 'companyName',
    label: '工作单位',
    align: 'center',
    minWidth: '300'
  },
  { prop: 'address', label: '家庭地址', align: 'center', width: '200' },
  {
    prop: 'handle',
    label: '操作',
    align: 'center',
    width: '100',
    solt: 'handle',
    fixed: 'right'
  }
])

// 返回家庭信息
function exportFunc() {
  const result = {
    spouseList: proxy.$refs.spouseInfo.exportData(),
    childrenList: proxy.$refs.childrenInfo.exportData()
  }
  const valid = handleSpouseList(result.spouseList)
  const validChild = handleChildrenList(result.childrenList)
  if (!valid || !validChild) return
  return {
    spouseList: valid,
    childrenList: validChild
  }
}

function handleSpouseList(row) {
  let result = []
  // 查询必填字段  根据必填字段进行 判断是否新增
  const resultList = spouseList.value.filter(v => v.required).map(v => v.prop)
  row.forEach(v => {
    resultList.forEach(n => {
      if (v[n]) {
        result.push(v)
      }
    })
  })
  // 对需要校验的字段进行校验
  const needValidArray = spouseList.value.filter(v => v.validator)
  for (let i = 0; i < needValidArray.length; i++) {
    const key = needValidArray[i].prop
    for (let index = 0; index < result.length; index++) {
      const el = result[index]
      const valid = needValidArray[i].validator(el[key])
      if (!valid) {
        return false
      }
    }
  }
  return result
}

function handleChildrenList(row) {
  let result = []
  // 查询必填字段  根据必填字段进行 行判断是否添加
  const resultChildList = childrenList.value
    .filter(v => v.required)
    .map(v => v.prop)
  row.forEach(v => {
    resultChildList.forEach(n => {
      if (v[n]) {
        result.push(v)
      }
    })
  })
  // result.childrenList = resultChildList
  const needValidChildArray = childrenList.value.filter(v => v.validator)
  for (let i = 0; i < needValidChildArray.length; i++) {
    const key = needValidChildArray[i].prop
    for (let index = 0; index < result.length; index++) {
      const el = result[index]
      const valid = needValidChildArray[i].validator(el[key])
      console.log(el, '11111', valid)
      if (!valid) {
        return false
      }
    }
  }
  return result
}

watch(
  () => props.pageType,
  val => {
    if (val === 'detail') {
      console.log(123)
      spouseList.value.splice(spouseList.value.length - 1, 1)
      childrenList.value.splice(childrenList.value.length - 1, 1)
      spouseList.value.forEach(v => {
        v.disabled = true
      })
      childrenList.value.forEach(v => {
        v.disabled = true
      })
    }
  },
  { deep: true, immediate: true }
)

defineExpose({
  exportFunc
})
</script>

<style scoped lang="scss"></style>
